<template>
	<div class="home-container">
		<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" @change="onChange">
			<van-swipe-item>1</van-swipe-item>
			<van-swipe-item>2</van-swipe-item>
			<van-swipe-item>3</van-swipe-item>
			<van-swipe-item>4</van-swipe-item>
		</van-swipe>

		<!-- <van-tabs class="table-title">
			<van-tab title="标签 1" name="a">内容 1</van-tab>
			<van-tab title="标签 2" name="b">内容 2</van-tab>
		</van-tabs>


		<div class="custom-input">
			<input class="home-input" type="text" placeholder="里面没有值" />
		</div>
		<p @click="doGet">get 请求</p>
		<p @click="doPost">post 请求</p>

		<span v-html="text"></span>


		<p @click="toAbout">Home</p>
		<input type="text" placeholder="里面没有值" /> -->
		<div v-if="isLogin">
			<van-list class="chat-list">
				<van-cell class="chat-item" v-for="(item, i) in chatList" size="large" center :title="item.account"
					@click="chat(item)">
					<!-- 使用 right-icon 插槽来自定义右侧图标 -->
					<template #right-icon>
						<van-icon name="chat-o" size="28"></van-icon>
					</template>
				</van-cell>
			</van-list>
		</div>
		<div class="to-login" v-else @click="toLogin()">
			前往登录
		</div>
	</div>
</template>

<script>
	import {
		showToast
	} from 'vant'
	export default {
		data() {
			return {
				"isSelected": false,
				"txtSelect": {
					color: 'red'
				},
				"txtNormal": {
					color: 'blue'
				},
				text: "这是一段文字 <br /> 换了一行",

				isLogin: false,
				chatList: []
			}
		},
		beforeMount() {
			this.isLogin = this.$store.getters.isLogin
			this.postChatList()
		},
		mounted() {
			console.log("Home")
		},
		methods: {
			onChange() {
				// showToast('当前 Swipe 索引：' + index)
			},
			log() {

			},
			toAbout() {
				this.$router.push("/about")
			},
			doGet() {
				console.log("进行 Get 请求");
				this.$http.root()
					.then(function(resp) {
						console.log("请求成功");
						console.log(resp);
					})
					.catch(function(e) {
						console.log(e);
					})
					.then(function() {})
			},
			doPost() {
				console.log("进行 Post 请求");
				this.$http.register()
					.then(function(resp) {
						console.log("请求成功");
						console.log(resp);
					})
					.catch(function(e) {
						console.log(e);
					})
					.then(function() {})
			},
			toLogin() {
				this.$router.push("/login")
			},
			postChatList() {
				if (this.$store.getters.isLogin) {
					let that = this
					console.log("获取聊天队列");
					this.$http.chatList({
							"account": this.$store.getters.userInfo.account
						}).then(function(resp) {
							console.log(resp);
							that.chatList = resp.data.data
						}).catch(function(e) {})
						.then(function() {

						})
				} else {
					console.log("未登录");
				}
			},
			chat(user) {
				showToast("进入聊天: " + user.account + " <-> " + this.$store.getters.userInfo.account)

				this.$router.push({
					path: '/chat',
					query: {
						firend: JSON.stringify(user)
					}
				})
			}
		}
	}
</script>

<style lang="less">
	.home-container {
		display: flex;
		flex-direction: column;

		& input:focus {
			border: 2px solid #A84335;
		}

		& .custom-input {
			& .home-input {
				color: blue;
			}

			& input::-webkit-input-placeholder {
				color: red;
			}
		}

		& .to-login {
			position: relative;
			height: 50%;
			top: 50%;
			// 偏移
			transform: translateY(-50%);
			// 水平居中
			text-align: center;
		}

		// 页面相关样式
		& .chat-list {
			margin: 12px 16px 0 16px;

			& .chat-item {
				border-bottom: 1px solid #ececec;
			}
		}


	}

	.table-title {

		& .van-tab--active {
			color: red;
			font-size: 18px;
		}
	}

	.my-swipe .van-swipe-item {
		color: #fff;
		font-size: 20px;
		line-height: 150px;
		text-align: center;
		background-color: #39a9ed;
	}

	.txt-selected {
		color: red;
	}

	.txt-normal {
		color: blue;
	}
</style>